import AvailableSpace from "./available-space";
import "./css.scss";
export default defineComponent({
	name: "RunTimePanel",
	setup() {
		return () => (
			<div>
				<div
					class="react-grid-item react-draggable react-resizable"
					data-panelid="15"
					style="top: 342px; left: 0px; width: 145px; height: 68px; position: absolute;"
				>
					<section class="panel-container" aria-label="运行时间 panel">
						<div class="panel-header grid-drag-handle">
							<header data-testid="data-testid Panel header 运行时间" class="panel-title-container">
								<div class="panel-title">
									<h2 class="css-1m35bcr">运行时间</h2>
									<div class="css-1vzus6i-Icon">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											width="16"
											height="16"
											class="css-sr6nr panel-menu-toggle"
										>
											<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
										</svg>
									</div>
								</div>
							</header>
						</div>
						<div class="panel-content panel-content--no-padding">
							<div style="display: flex; overflow: hidden; flex-direction: column; height: 34px;">
								<div style="display: flex; margin-bottom: 0px; width: 143px; height: 34px; margin-right: 0px;">
									<div
										style="width: 143px; height: 34px; padding: 8px; border-radius: 3px; position: relative; display: flex; background: transparent; align-items: center; flex-direction: row;"
										title='avg(time() - node_boot_time_seconds{hostname=~"walle云"})'
									>
										<div style="display: flex; align-items: center; justify-content: center; flex-grow: 1; flex-direction: row;">
											<div style="font-size: 15px; font-weight: 500; line-height: 1.2; position: relative; z-index: 1; text-align: center; color: rgba(50, 172, 45, 0.97);">
												<div>
													<span>31</span>
													<span style="font-size: 13.5px;"> week</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
					<span class="react-resizable-handle react-resizable-handle-se"></span>
				</div>
				<div
					class="react-grid-item react-draggable react-resizable"
					data-panelid="178"
					style="top: 342px; left: 153px; width: 145px; height: 106px; position: absolute;"
				>
					<section class="panel-container" aria-label="总文件描述符 panel">
						<div class="panel-header grid-drag-handle">
							<header data-testid="data-testid Panel header 总文件描述符" class="panel-title-container">
								<div class="panel-title">
									<h2 class="css-1m35bcr">总文件描述符</h2>
									<div class="css-1vzus6i-Icon">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											width="16"
											height="16"
											class="css-sr6nr panel-menu-toggle"
										>
											<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
										</svg>
									</div>
								</div>
							</header>
						</div>
						<div class="panel-content panel-content--no-padding">
							<div style="display: flex; overflow: hidden; flex-direction: column; height: 72px;">
								<div style="display: flex; margin-bottom: 0px; width: 143px; height: 72px; margin-right: 0px;">
									<div
										style="width: 143px; height: 72px; padding: 8px; border-radius: 3px; position: relative; display: flex; background: transparent; align-items: center; flex-direction: row;"
										title='avg(node_filefd_maximum{hostname=~"walle云"})'
									>
										<div style="display: flex; align-items: center; justify-content: center; flex-grow: 1; flex-direction: column;">
											<div style="font-size: 28.4364px; font-weight: 500; line-height: 1.2; position: relative; z-index: 1; text-align: center; color: rgba(50, 172, 45, 0.97);">
												<div>
													<span>1,000,000</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
					<span class="react-resizable-handle react-resizable-handle-se"></span>
				</div>
				<div
					class="react-grid-item react-draggable react-resizable"
					data-panelid="177"
					style="top: 342px; left: 306px; width: 528px; height: 220px; position: absolute;"
				>
					<section class="panel-container panel-container--no-title" aria-label=" panel">
						<div class="panel-header grid-drag-handle" style="display:none;">
							<header data-testid="data-testid Panel header " class="panel-title-container">
								<div class="panel-title">
									<h2 class="css-1m35bcr"></h2>
									<div class="css-1vzus6i-Icon">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											width="16"
											height="16"
											class="css-sr6nr panel-menu-toggle"
										>
											<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
										</svg>
									</div>
								</div>
							</header>
						</div>
						<div class="panel-content">
							<div style="display: flex; overflow: hidden auto; flex-direction: column; height: 202px;">
								<div style="display: flex; margin-bottom: 2px; width: 510px; height: 49px;">
									<div style="display: flex; overflow: hidden; width: 100%; flex-direction: column;">
										<div style="width: 100%; align-items: center; font-size: 14.7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center;">
											总CPU使用率
										</div>
										<div style="width: 510px; height: 26.95px; display: flex; flex-direction: row; align-items: center;">
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div
												aria-label="Bar gauge value"
												style="color: rgb(115, 191, 105); height: 26.95px; width: 102px; display: flex; align-items: center; line-height: 1; font-size: 26.95px; justify-content: flex-end; padding-left: 10px; padding-right: 10px;"
											>
												<div>
													<span>20.3</span>
													<span style="font-size: 16.17px;">%</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div style="display: flex; margin-bottom: 2px; width: 510px; height: 49px;">
									<div style="display: flex; overflow: hidden; width: 100%; flex-direction: column;">
										<div style="font-size: 14.7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; align-items: center; align-self: center;">
											IOwait使用率
										</div>
										<div style="width: 510px; height: 26.95px; display: flex; flex-direction: row; align-items: center;">
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div
												aria-label="Bar gauge value"
												style="color: rgb(115, 191, 105); height: 26.95px; width: 102px; display: flex; align-items: center; line-height: 1; font-size: 26.95px; justify-content: flex-end; padding-left: 10px; padding-right: 10px;"
											>
												<div>
													<span>0.0</span>
													<span style="font-size: 16.17px;">%</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div style="display: flex; margin-bottom: 2px; width: 510px; height: 49px;">
									<div style="display: flex; overflow: hidden; width: 100%; flex-direction: column;">
										<div style="font-size: 14.7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; align-items: center; align-self: center;">
											内存使用率
										</div>
										<div style="width: 510px; height: 26.95px; display: flex; flex-direction: row; align-items: center;">
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div
												aria-label="Bar gauge value"
												style="color: rgb(115, 191, 105); height: 26.95px; width: 102px; display: flex; align-items: center; line-height: 1; font-size: 26.95px; justify-content: flex-end; padding-left: 10px; padding-right: 10px;"
											>
												<div>
													<span>26.9</span>
													<span style="font-size: 16.17px;">%</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div style="display: flex; margin-bottom: 0px; width: 510px; height: 49px; margin-right: 0px;">
									<div style="display: flex; overflow: hidden; width: 100%; flex-direction: column;">
										<div style="font-size: 14.7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; align-items: center; align-self: center;">
											交换分区使用率
										</div>
										<div style="width: 510px; height: 26.95px; display: flex; flex-direction: row; align-items: center;">
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-image: radial-gradient(rgba(115, 191, 105, 0.95) 10%, rgba(115, 191, 105, 0.55)); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(115, 191, 105, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(234, 184, 57, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div style="border-radius: 2px; background-color: rgba(242, 73, 92, 0.18); width: 10px; height: 26.95px; margin-right: 2px;"></div>
											<div
												aria-label="Bar gauge value"
												style="color: rgb(115, 191, 105); height: 26.95px; width: 102px; display: flex; align-items: center; line-height: 1; font-size: 26.95px; justify-content: flex-end; padding-left: 10px; padding-right: 10px;"
											>
												<div>
													<span>37.5</span>
													<span style="font-size: 16.17px;">%</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
					<span class="react-resizable-handle react-resizable-handle-se"></span>
				</div>
				<AvailableSpace />
				<div
					class="react-grid-item react-draggable react-resizable"
					data-panelid="14"
					style="top: 418px; left: 0px; width: 145px; height: 68px; position: absolute;"
				>
					<section class="panel-container" aria-label="CPU 核数 panel">
						<div class="panel-header grid-drag-handle">
							<header data-testid="data-testid Panel header CPU 核数" class="panel-title-container">
								<div class="panel-title">
									<h2 class="css-1m35bcr">CPU 核数</h2>
									<div class="css-1vzus6i-Icon">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											width="16"
											height="16"
											class="css-sr6nr panel-menu-toggle"
										>
											<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
										</svg>
									</div>
								</div>
							</header>
						</div>
						<div class="panel-content panel-content--no-padding">
							<div style="display: flex; overflow: hidden; flex-direction: column; height: 34px;">
								<div style="display: flex; margin-bottom: 0px; width: 143px; height: 34px; margin-right: 0px;">
									<div
										style="width: 143px; height: 34px; padding: 8px; border-radius: 3px; position: relative; display: flex; background: transparent; align-items: center; flex-direction: row;"
										title="count(node_cpu_seconds_total{hostname=~&quot;walle云&quot;, mode='system'})"
									>
										<div style="display: flex; align-items: center; justify-content: center; flex-grow: 1; flex-direction: row;">
											<div style="font-size: 15px; font-weight: 500; line-height: 1.2; position: relative; z-index: 1; text-align: center; color: rgba(50, 172, 45, 0.97);">
												<div>
													<span>8</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
					<span class="react-resizable-handle react-resizable-handle-se"></span>
				</div>
				<div
					class="react-grid-item react-draggable react-resizable"
					data-panelid="20"
					style="top: 456px; left: 153px; width: 145px; height: 106px; position: absolute;"
				>
					<section class="panel-container" aria-label="CPU iowait panel">
						<div class="panel-header grid-drag-handle">
							<header data-testid="data-testid Panel header CPU iowait" class="panel-title-container">
								<div class="panel-title">
									<h2 class="css-1m35bcr">CPU iowait</h2>
									<div class="css-1vzus6i-Icon">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											width="16"
											height="16"
											class="css-sr6nr panel-menu-toggle"
										>
											<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
										</svg>
									</div>
								</div>
							</header>
						</div>
						<div class="panel-content panel-content--no-padding">
							<div style="display: flex; overflow: hidden; flex-direction: column; height: 72px;">
								<div style="display: flex; margin-bottom: 0px; width: 143px; height: 72px; margin-right: 0px;">
									<div
										style="width: 143px; height: 72px; padding: 8px; border-radius: 3px; position: relative; display: flex; background: transparent; align-items: center; flex-direction: row;"
										title='avg(rate(node_cpu_seconds_total{hostname=~"walle云",mode="iowait"}[2m])) * 100'
									>
										<div style="display: flex; align-items: center; justify-content: center; flex-grow: 1; flex-direction: column;">
											<div style="font-size: 44.9871px; font-weight: 500; line-height: 1.2; position: relative; z-index: 1; text-align: center; color: rgba(50, 172, 45, 0.97);">
												<div>
													<span>0.01</span>
													<span style="font-size: 26.9922px;">%</span>
												</div>
											</div>
										</div>
										<div style="position: absolute; right: 0px; bottom: 0px;">
											<div style="position: relative;">
												<div data-testid="uplot-main-div"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
					<span class="react-resizable-handle react-resizable-handle-se"></span>
				</div>
				<div
					class="react-grid-item react-draggable react-resizable"
					data-panelid="75"
					style="top: 494px; left: 0px; width: 145px; height: 68px; position: absolute;"
				>
					<section class="panel-container" aria-label="总内存 panel">
						<div class="panel-header grid-drag-handle">
							<header data-testid="data-testid Panel header 总内存" class="panel-title-container">
								<div class="panel-title">
									<h2 class="css-1m35bcr">总内存</h2>
									<div class="css-1vzus6i-Icon">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 24 24"
											width="16"
											height="16"
											class="css-sr6nr panel-menu-toggle"
										>
											<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
										</svg>
									</div>
								</div>
							</header>
						</div>
						<div class="panel-content panel-content--no-padding">
							<div style="display: flex; overflow: hidden; flex-direction: column; height: 34px;">
								<div style="display: flex; margin-bottom: 0px; width: 143px; height: 34px; margin-right: 0px;">
									<div
										style="width: 143px; height: 34px; padding: 8px; border-radius: 3px; position: relative; display: flex; background: transparent; align-items: center; flex-direction: row;"
										title="Value"
									>
										<div style="display: flex; align-items: center; justify-content: center; flex-grow: 1; flex-direction: row;">
											<div style="font-size: 15px; font-weight: 500; line-height: 1.2; position: relative; z-index: 1; text-align: center; color: rgba(50, 172, 45, 0.97);">
												<div>
													<span>16</span>
													<span style="font-size: 13.5px;"> GiB</span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</section>
					<span class="react-resizable-handle react-resizable-handle-se"></span>
				</div>
			</div>
		);
	}
});
